<template>
  <div class="home">
    <div class="header">
      <img src="@/assets/images/Home/logo.jpg" />
      <div class="search">
        <input placeholder="搜索商品名称" />
        <van-icon name="search" size="0.3rem" />
      </div>
      <div class="icon">
        <van-icon name="user-o" size="0.4rem" />
      </div>
    </div>
    <div class="tab">
      <van-tabs
        v-model="tabActive"
        animated
        background="#f3f3f3"
        line-width="0.8rem"
        line-height="0.05rem"
        swipeable
        title-active-color="#ed5b00"
        title-inactive-color="#747474"
        sticky
      >
        <van-tab title="推荐"></van-tab>
        <van-tab title="手机"></van-tab>
        <van-tab title="智能"></van-tab>
        <van-tab title="电视"></van-tab>
        <van-tab title="笔记本"></van-tab>
        <van-tab title="家电"></van-tab>
      </van-tabs>
    </div>
    <scroll
      class="concent"
      ref="scroll"
      :probe-type="3"
      @scroll="checkBackTop"
      :pull-up-load="true"
    >
      <div class="swipe">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(imgUrl, index) in swipe" :key="index">
            <img :src="imgUrl.url" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="grid">
        <van-grid :column-num="5" :border="false">
          <van-grid-item v-for="(imgUrl, index) in grid" :key="index">
            <img :src="imgUrl.url" />
          </van-grid-item>
        </van-grid>
      </div>
      <div class="floor">
        <div class="floor_left">
          <img src="@/assets/images/Home/floor-left.jpg" />
        </div>
        <div class="floor_right">
          <img src="@/assets/images/Home/floor-right01.jpg" />
          <img src="@/assets/images/Home/floor-right02.jpg" />
        </div>
      </div>
      <div class="tip">
        <img src="@/assets/images/Home/tip.jpg" />
      </div>
      <div class="goods_info">
        <van-grid :column-num="2" :border="false">
          <van-grid-item v-for="(goods, index) in goodsInfoPhone" :key="index">
            <img :src="goods.url" />
            <div class="title">{{goods.title}}</div>
            <div class="info">{{goods.info}}</div>
            <div class="price">
              ￥{{goods.newPrice}}起
              <s>￥{{goods.oldPrice}}</s>
            </div>
            <div class="but">
              <van-button type="default">立即购买</van-button>
            </div>
          </van-grid-item>
          <div class="tip">更多小米手机产品 ></div>
        </van-grid>
      </div>
      <div class="tip">
        <img src="@/assets/images/Home/tip_tele.webp" />
      </div>
      <div class="goods_info">
        <van-grid :column-num="2" :border="false">
          <van-grid-item v-for="(goods, index) in goodsInfoTele" :key="index">
            <img :src="goods.url" />
            <div class="title">{{goods.title}}</div>
            <div class="info">{{goods.info}}</div>
            <div class="price">
              ￥{{goods.newPrice}}起
              <s>￥{{goods.oldPrice}}</s>
            </div>
            <div class="but">
              <van-button type="default">立即购买</van-button>
            </div>
          </van-grid-item>
          <div class="tip">更多小米电视产品 ></div>
        </van-grid>
      </div>
      <div class="footer"></div>
    </scroll>
    <div class="footer_img" v-show="isShowTop">
      <img src="@/assets/images/Home/money.gif" />
    </div>
    <back-top @click.native="backTop" v-show="isShowTop"></back-top>
  </div>
</template>

<script>
import Scroll from '@/components/common/bScroll/bScroll.vue'
import backTop from '@/components/backTop/backTop.vue'

export default {
  components: {
    Scroll,
    backTop
  },
  data() {
    return {
      search: '',
      tabActive: 0,
      isShowTop: false,
      swipe: [
        {
          url: require('@/assets/images/Home/swipe01.jpg')
        },
        {
          url: require('@/assets/images/Home/swipe02.jpg')
        },
        {
          url: require('@/assets/images/Home/swipe03.jpg')
        }
      ],
      grid: [
        {
          url: require('@/assets/images/Home/grid01.png')
        },
        {
          url: require('@/assets/images/Home/grid02.webp')
        },
        {
          url: require('@/assets/images/Home/grid03.png')
        },
        {
          url: require('@/assets/images/Home/grid04.webp')
        },
        {
          url: require('@/assets/images/Home/grid05.webp')
        },
        {
          url: require('@/assets/images/Home/grid06.png')
        },
        {
          url: require('@/assets/images/Home/grid07.png')
        },
        {
          url: require('@/assets/images/Home/grid08.png')
        },
        {
          url: require('@/assets/images/Home/grid09.png')
        },
        {
          url: require('@/assets/images/Home/grid10.png')
        }
      ],
      goodsInfoPhone: [
        {
          url: require('@/assets/images/Home/goodsInfo01.jpg'),
          title: '小米10 Pro',
          info: '骁龙865 / 50倍变焦',
          newPrice: 4999,
          oldPrice: 5399
        },
        {
          url: require('@/assets/images/Home/goodsInfo02.jpg'),
          title: '小米10',
          info: '骁龙865/1亿像素相机',
          newPrice: 3799,
          oldPrice: 3999
        },
        {
          url: require('@/assets/images/Home/goodsInfo03.jpg'),
          title: 'Redmi K30 4G',
          info: '120Hz流速屏，全速热爱',
          newPrice: 1499,
          oldPrice: 1699
        },
        {
          url: require('@/assets/images/Home/goodsInfo04.jpg'),
          title: 'Redmi K30 5G',
          info: '双模5G，120Hz流速屏',
          newPrice: 1899,
          oldPrice: 2299
        },
        {
          url: require('@/assets/images/Home/goodsInfo05.jpg'),
          title: 'Redmi Note 8 Pro',
          info: '6400万全场景四摄',
          newPrice: 1199,
          oldPrice: 1699
        },
        {
          url: require('@/assets/images/Home/goodsInfo06.jpg'),
          title: 'Redmi Note 8',
          info: '千元4800万四摄',
          newPrice: 949,
          oldPrice: 1399
        }
      ],
      goodsInfoTele: [
        {
          url: require('@/assets/images/Home/goodsInfo_tele01.webp'),
          title: '小米电视4A 65英寸',
          info: '4K HDR，人工智能语音系统',
          newPrice: 2399,
          oldPrice: 999
        },
        {
          url: require('@/assets/images/Home/goodsInfo_tele02.jpg'),
          title: '小米电视4X 43英寸',
          info: 'FHD全高清屏，人工智能语音',
          newPrice: 1099,
          oldPrice: 1399
        },
        {
          url: require('@/assets/images/Home/goodsInfo_tele03.jpg'),
          title: '小米电视4C 50英寸',
          info: '4K HDR，钢琴烤漆',
          newPrice: 1599,
          oldPrice: 1699
        },
        {
          url: require('@/assets/images/Home/goodsInfo_tele04.jpg'),
          title: '小米电视4C 55英寸',
          info: '4K HDR，人工智能系统',
          newPrice: 1899,
          oldPrice: 1999
        },
        {
          url: require('@/assets/images/Home/goodsInfo_tele05.jpg'),
          title: '小米电视4A 32英寸',
          info: '人工智能系统，高清液晶屏',
          newPrice: 699,
          oldPrice: 799
        },
        {
          url: require('@/assets/images/Home/goodsInfo_tele06.png'),
          title: '小米电视4A 50英寸',
          info: '4K HDR，人工智能语音系统',
          newPrice: 1599,
          oldPrice: 1699
        }
      ]
    }
  },
  methods: {
    backTop() {
      // console.log('点击了')
      this.$refs.scroll.scrollTo(0, 0)
    },
    checkBackTop(position) {
      this.isShowTop = -position.y > 500
    }
  }
}
</script>
<style lang="less" scoped>
.home {
  background: rgb(244, 244, 244);
  padding-top: 0.1rem;
}
.concent {
  height: 25rem;
  overflow: hidden;
}
.header {
  display: flex;
  height: 1rem;
}
.header img {
  width: 16vw;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header .search input {
  width: 62vw;
  height: 100%;
  border: 1px solid #e5e5e5;
  padding-left: 1rem;
  padding-top: 0.2rem;
  font-size: 0.2rem;
}
.search {
  position: relative;
}
.search .van-icon {
  position: absolute;
  top: 0.35rem;
  left: 0.2rem;
  color: #ccc;
  font-size: 0.6rem !important;
}
.van-field__control {
  height: 0.1rem;
}
.icon .van-icon {
  color: #666;
  width: 14vw;
  height: 100%;
  font-size: 0.7rem !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tab {
  margin-top: 0.2rem;
  border-bottom: 0.05rem solid #e0e0e0;
}
.van-tabs__nav--line {
  padding-bottom: 0.1rem !important;
}
.swipe .my-swipe .van-swipe-item {
  font-size: 20px;
  line-height: 150px;
  text-align: center;
}
.swipe img {
  width: 100%;
}
.grid {
  margin-top: 0.02rem;
}
.grid img {
  width: 3rem;
  height: 2.6rem;
}
element.style {
  width: 1.5rem;
  height: 1.5rem;
}
.floor {
  width: 100%;
  height: 7.4rem;
  display: flex;
  margin: 0.25rem 0;
  margin-bottom: 2.4rem;
}
.floor .floor_left {
  width: 50%;
  margin-right: 0.1rem;
}
.floor .floor_right {
  width: 50%;
}
.floor .floor_right img:nth-child(2) {
  margin-top: 0.1rem;
}
.tip {
  width: 100%;
}
.goods_info {
  background-color: #fff;
}
.goods_info .title {
  font-size: 0.55rem;
}
.goods_info .info {
  color: #757575;
  font-size: 0.43rem;
}
.goods_info .price {
  color: #ea625b;
  font-size: 0.5rem;
}
.goods_info .price s {
  font-size: 0.4rem;
  font-weight: 400;
  color: #757575;
}
.but button {
  width: 3.5rem;
  height: 1.1rem;
  color: #fff;
  font-size: 0.5rem;
  font-weight: 600;
  background-color: #ea625b;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.2rem;
}
.goods_info {
  margin-bottom: 0.25rem;
}
.goods_info .tip {
  height: 1.5rem;
  font-size: 0.55rem;
  color: #666;
  display: flex;
  justify-content: center;
  align-items: center;
}
.van-sidebar-item__text:nth-child(1) {
  font-size: 0.6rem;
  color: #fb8845;
}
.footer {
  height: 1rem;
  width: 100%;
}
.footer_img {
  position: fixed;
  right: 0.6rem;
  bottom: 4.3rem;
}
.footer_img img {
  width: 2.3rem;
  height: 2.3rem;
}
</style>
